<template>
  <VueTinymceEditor
    tinymceScriptSrc="/tinymce/tinymce.min.js"
    :key="tinymceKey"
    :init="editorInit"
    v-model="content"
    :disabled="disabled"></VueTinymceEditor>
</template>

<script>
import VueTinymceEditor from '@tinymce/tinymce-vue'
import { nanoid } from 'nanoid'
import { editorInit } from '@/utils/helper/tinymce'

export default {
  components: { VueTinymceEditor },
  name: 'TinymceEditor',
  props: {
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    config: {
      type: Object,
      default () {
        return {}
      }
    },
    editorKey: {
      type: String,
      default: ''
    }
  },
  model: {
    prop: 'value',
    event: 'input'
  },
  computed: {
    editorInit () {
      return Object.assign({}, editorInit, this.config)
    }
  },
  data () {
    return {
      content: '',
      apiKey: process.env.VUE_APP_TINY_MCE_API_KEY, // 替换为您的 API 密钥
      tinymceKey: nanoid()
    }
  },
  watch: {
    value: {
      handler (val) {
        this.content = val
      },
      immediate: true
    },
    editorKey (val) {
      this.tinymceKey = val
    },
    content: {
      handler (val) {
        this.$emit('input', val)
      }
    },
    'config.placeholder' (val) {
      this.tinymceKey = nanoid()
    },
    'config.height' (val) {
      this.tinymceKey = nanoid()
    }
  },
  mounted () {
    this.tinymceKey = nanoid()
  },
  activated () {
    this.tinymceKey = nanoid()
  },
  deactivated () {
    this.tinymceKey = nanoid()
  },
  destroyed () {
    this.tinymceKey = nanoid()
  }
}
</script>
